const LoginSuccess='LoginSuccess'
let isLogin=0
document.addEventListener('click', function (e) {
    if(e.target.classList.contains('Login')) {
        document.querySelector('.login-modal').style.display = 'block';
        const loginLeft=document.querySelector('.login-left');
        loginLeft.innerHTML=`
                <h2>验证码登录 / 注册</h2>
            <div class="login-tip">登录掘金畅享更多权益</div>

            <div class="input-group">
                <select class="country-code">
                    <option>+86</option>
                </select>
                <input type="tel" placeholder="请输入邮箱" class="Loginemail">
            </div>

            <div class="input-group">
                <input type="text" placeholder="请输入密码" class="Loginpassword">
                <button class="get-code">获取验证码</button>
            </div>

            <button class="login-btn">登录/注册</button>

            <div class="other-login">
                <div class="other-title">其它登录：</div>
                <div class="social-icons">
                    <img src="image/GitHub.svg" width="24">
                    <img src="image/微信.svg" width="24">
                    <img src="image/微博.svg" width="24">
                </div>
            </div>

            <div class="toRegister">
                没有账号?去注册吧
            </div>

            `
    }
    if(e.target.classList.contains('Register')) {
        document.querySelector('.login-modal').style.display = 'block';
        const loginLeft=document.querySelector('.login-left');
        loginLeft.innerHTML=`
                <h2>注册页面</h2>
            <div class="login-tip">登录掘金畅享更多权益</div>

            <div class="input-group">
                <input type="tel" placeholder="请输入邮箱" class="Registeremail">
            </div>

            <div class="input-group">
                <input type="text" placeholder="请输入用户名" class="Registerusername">
            </div>

            <div class="input-group">
                <input type="text" placeholder="请输入密码" class="Registerpassword">
            </div>
            <button class="login-btn1">注册</button>


            <div class="toLogin">
                返回登录
            </div>
            `
    }
    if(e.target.classList.contains('close-btn')) {
        document.querySelector('.login-modal').style.display = 'none';
    }
    if(e.target.classList.contains('toRegister')){
        const loginLeft=document.querySelector('.login-left');
        loginLeft.innerHTML=`
                <h2>注册页面</h2>
            <div class="login-tip">登录掘金畅享更多权益</div>

            <div class="input-group">
                <input type="tel" placeholder="请输入邮箱" class="Registeremail">
            </div>

            <div class="input-group">
                <input type="text" placeholder="请输入用户名" class="Registerusername">
            </div>

            <div class="input-group">
                <input type="text" placeholder="请输入密码" class="Registerpassword">
            </div>
            <button class="login-btn1">注册</button>


            <div class="toLogin">
                返回登录
            </div>
            `
    }

    if(e.target.classList.contains('toLogin')){
        const loginLeft=document.querySelector('.login-left');
        loginLeft.innerHTML=`
                <h2>验证码登录 / 注册</h2>
            <div class="login-tip">登录掘金畅享更多权益</div>

            <div class="input-group">
                <select class="country-code">
                    <option>+86</option>
                </select>
                <input type="tel" placeholder="请输入邮箱" class="Loginemail">
            </div>

            <div class="input-group">
                <input type="text" placeholder="请输入密码" class="Loginpassword">
                <button class="get-code">获取验证码</button>
            </div>

            <button class="login-btn">登录/注册</button>

            <div class="other-login">
                <div class="other-title">其它登录：</div>
                <div class="social-icons">
                    <img src="image/GitHub.svg" width="24">
                    <img src="image/微信.svg" width="24">
                    <img src="image/微博.svg" width="24">
                </div>
            </div>

            <div class="toRegister">
                没有账号?去注册吧
            </div>

            `
    }

    if(e.target.classList.contains('login-btn1')){
        const Registeremail=document.querySelector('.Registeremail').value;
        const Registerusername=document.querySelector('.Registerusername').value;
        const Registerpassword=document.querySelector('.Registerpassword').value;
        console.log(Registeremail,Registerusername,Registerpassword)
        const data={
            email:Registeremail,
            username:Registerusername,
            password:Registerpassword
        }
        let xhr=new XMLHttpRequest();
        xhr.open(
            'POST',
            `http://43.136.111.27:8086/user/register`
        )
        xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8')
        xhr.send(JSON.stringify(data))
        xhr.onreadystatechange=function (){
            if(xhr.readyState===4&&xhr.status===200){
                let response=JSON.parse(xhr.responseText);
                console.log(response)
                alert('注册成功')
                document.querySelector('.login-modal').style.display = 'none';
            }
        }
    }
    if(e.target.classList.contains('login-btn')){
        const LoginEmail=document.querySelector('.Loginemail').value;
        const Loginpassword=document.querySelector('.Loginpassword').value;
        console.log(LoginEmail,Loginpassword)
        let xhr = new XMLHttpRequest();
        xhr.open(
            'POST',
            `http://43.136.111.27:8086/user/login?email=${LoginEmail}&password=${Loginpassword}`
        )
        xhr.send()
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                let res = JSON.parse(xhr.responseText);
                console.log(res)
                if(res.code==200){
                    alert('登录成功')
                    let key=res.data
                    document.dispatchEvent(new CustomEvent(LoginSuccess,{
                        detail: key
                    }))
                    document.querySelector('.login-modal').style.display = 'none';
                }
                else{
                    alert('用户名或密码输入不正确')
                }
            }
        }
    }
})